

//文档加载事件
document.ready(function () {

  //初始化canvas插件
  CanvasParticle({
    vx: 4,	//小球x轴速度,正为右，负为左
    vy: 4,	//小球y轴速度
    height: 2,	//小球高宽，其实为正方形，所以不宜太大
    width: 2,
    count: 200,		//点个数
    color: "199, 199, 199", 	//点颜色
    stroke: "100,100,100", 		//线条颜色
    dist: 6000, 	//点吸附距离
    e_dist: 20000, 	//鼠标吸附加速距离
    max_conn: 10 	//点到点最大连接数
  });

  /**
   * 0.获取元素
   */
  let apiFour = document.querySelector('.api-four')
  let priceAll = document.querySelector('.priceAll')
  let unitPrice = document.querySelector('.unitPrice')


  /**
   * 1.需求: 定义价格数据
   */
  let pricData = [
    {
      count: 4000,
      price: 1200,
      unitPrice: 0.3000
    },
    {
      count: 8000,
      price: 2000,
      unitPrice: 0.2500
    },
    {
      count: 40000,
      price: 8000,
      unitPrice: 0.2000
    },
  ];

  /**
   * 2.需求: 将价格数据渲染到页面中
   */

  let renderPriceData = function () {
    let priceDataHTML = '';//保存拼装好的数据
    pricData.forEach(function (v) {
      priceDataHTML += `
      <li class="render-li fl" data-price="${v.price}" data-unit="${v.unitPrice}" >${v.count}次</li> 
    `
    })

    //渲染到页面中
    apiFour.innerHTML += priceDataHTML
    apiFour.children[1].classList.add('active')
  }
  renderPriceData();

  /**
   * 3.需求: 事件委派给api-four注册点击事件, 切换对应价格
   */
   apiFour.addEventListener('click', function (e){
    if( e.target.classList.contains('render-li') ){
      //获取价格
      priceAll.textContent = e.target.dataset.price

      //获取单价
      unitPrice.textContent =  (+e.target.dataset.unit).toFixed(4)

      //清除其他li的激活样式
      for (let i = 0; i < apiFour.children.length; i++) {
        apiFour.children[i].classList.remove('active')
      };
      
      //当前li添加激活样式
      e.target.classList.add('active')
    };
  })

  /**
   * 4.需求: 选项卡
   */

  let apiMenu = document.querySelectorAll('.api-tab-menu li')//获取菜单
  let apiText = document.querySelectorAll('.api-tab-cont div')//获取内容

  tabCard(apiMenu,'active', apiText, 'on')


  /* 5.内容选项卡 */
  let tabulLi=document.querySelectorAll('.content .tabul li')//获取菜单
  let tabconItem=document.querySelectorAll('.tab-text .tab-left .tabcon-item')//获取内容

  tabCard(tabulLi,'active', tabconItem, 'current')

})